<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="/js/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="/js/jquery-3.1.1.min.js"></script>
		<style>
		.login-one{
		  background-image:url(../image/bj.jpg);
		  background-size: cover;
		  background-repeat:no-repeat;
		  overflow:hidden;
		  height: 100%;
		}
		
		  .el-header, .el-footer {
		    color: white;
			padding-top: 10px;
		  }
		  
		  .el-aside {
		    background-color: white;
			height: 100%;
		  }
		  
		  .el-main {
	/* 		 background-image:url(../image/bj.jpg); */
			  overflow: hidden;
			 height: 100%;
		  }
		  .el-container{
			  height: 100%;
		  }
		  html,body{
			 height: 100%; 
			 margin: 0px;
		  }
		</style>
	</head>
	<body>
		<div id="app" style="height: 100%;">
			<el-container>
			  <el-header class="login-one">
				  <el-col :span="8">
					     <span>马牌damn蛋糕销售商城</span>
				  </el-col>
				   <el-col :span="8">
					   &nbsp;
				   </el-col>
				    <el-col :span="8" align="right">
						<el-button type="success" size="mini" @click="logout">退出登录</el-button>
					</el-col>
				
			  </el-header>
			  <el-container>
			    <el-aside width="200px">
					<el-menu
						:default-openeds=['0']
					 class="el-menu-vertical-demo"
					>
						<el-submenu index="0">
							<template slot="title">
								<i class="el-icon-s-tools"></i>
								<span>主页</span>
							</template>
							<el-menu-item @click="toUrl('mains.html','主页')">
								<i class="el-icon-user-solid"></i>
								<span>主页</span>
							</el-menu-item>
							<el-menu-item @click="toUrl('myorder.html','我的订单')">
								<i class="el-icon-user-solid"></i>
								<span>我的订单</span>
							</el-menu-item>
							<el-menu-item @click="toUrl('myaddress.html','地址管理')">
								<i class="el-icon-user-solid"></i>
								<span>地址管理</span>
							</el-menu-item>
							<el-menu-item @click="toUrl('mycallbacks.html','我的反馈')">
								<i class="el-icon-user-solid"></i>
								<span>我的反馈</span>
							</el-menu-item>

						</el-submenu>
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-s-tools"></i>
							<span>营销管理</span>
						</template>
						<el-menu-item @click="toUrl('goods.html','商品管理')">
							<i class="el-icon-user-solid"></i>
							<span>商品管理</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('managerorders.html','订单管理')">
							<i class="el-icon-user-solid"></i>
							<span>订单管理</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('echartspage.html','营销报表')">
							<i class="el-icon-user-solid"></i>
							<span>营销报表</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('managercallback.html','反馈管理')">
							<i class="el-icon-user-solid"></i>
							<span>反馈管理</span>
						</el-menu-item>

					</el-submenu>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-s-tools"></i>
							<span>系统管理</span>
						</template>
						<el-menu-item @click="toUrl('permission.html','权限管理')">
							<i class="el-icon-user-solid"></i>
							<span>权限管理</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('roles.html','角色管理')">
							<i class="el-icon-user-solid"></i>
							<span>角色管理</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('rp.html','角色-权限管理')">
							<i class="el-icon-user-solid"></i>
							<span>角色-权限管理</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('user_list.html','用户管理')">
							<i class="el-icon-user-solid"></i>
							<span>用户管理</span>
						</el-menu-item>

					</el-submenu>




					</el-menu>
				</el-aside>
			
			    <el-main>
				<el-tag
				 type="warning"
				@click="openUrl(tag.url)"
				  :key="tag.name"
				  v-for="tag in tags"
				  closable
				  :disable-transitions="false"
				  @close="handleClose(tag.name)" style="position:relative;top:-20px;left: -20px;cursor: pointer;">
				  {{tag.name}}
				</el-tag>
					<iframe :src="url" height="100%" width="100%" style="border: solid 0px;">
						
					</iframe>
				</el-main>
			  </el-container>
			</el-container>
		</div>
	</body>
	<script>
			new Vue({
				el:"#app",
				data:{
					tags: [{name:"主页",url:"mains.html"}],
					url:"mains.html",
					circleUrl: "http://localhost:8080/images/title.jpg",
					username:"",
				},
				mounted(){
					let username = localStorage.getItem("uid")
					if (username==undefined||username==""){
						window.location.href = "/html/login.html"
					}
				},
				methods:{
					logout(){
						localStorage.setItem("uid","")
						window.location.href = "/html/login.html"
					},
					 toUrl:function(url,name){
						 this.url = url;
						 var is = false;
						 for (var i=0;i<this.tags.length;i++){
							 if(this.tags[i].name==name){
								 is = true;
							 }
						 }
						if(is==false){
							this.tags.push({"name":name,"url":url});
						}
							  
												
					 },
					handleClose(name) {
					    if(name=="主页"){
							this.$message({
								message:"主页",
								type:"error"
							})
							return;
						}
						var is = false;
						 for (var i=0;i<this.tags.length;i++){
							 if(this.tags[i].name==name){
								   this.tags.splice(this.tags.indexOf(this.tags[i]), 1);
							 }
						 }
						
						this.url="mains.html";
					},
					openUrl:function(url){
						this.url = url;
						
					
					}
				}
			
			})
	
	</script>
</html>
